<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <!-- ================================================================ -->
 <!-- WARNING! This document contains significant trailing whitespace! -->
 <!-- ================================================================ -->

 <head>
  <title>CSS Test: white-space: mixed tests</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/text/white-space/mixed/dynamic/001.html" type="text/html"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#white-space-model" />
  <meta name="flags" content="ahem interact"/>
  <style type="text/css">* { margin: 0; padding: 0 }
   div { font: 1em/1 Ahem, monospace; color: navy; }
   .bn { white-space: normal; }
   .bp { white-space: pre; }
   div:hover .an { white-space: normal; }
   div:hover .ap { white-space: pre; }
   div:hover .aG { color: green; }
   div:hover .aB { color: brown; }
   div:hover .abG { background: green; }
   div:hover .abL { background: lime; }
  </style>
 </head>
 <body>
  <p>The picture below should change from a smiley-face to a landscape when you hover over it.</p>

  <!-- note that spaces at the start of a line collapse in white-space: normal -->

  <div>
<span class="bp an">    </span><span class="bn ap aG">   ###</span><span class="bp ap"><!-- keep newline -->
 </span><span class="bp an aG">  ##<span class="abL"> </span>  </span><span class="bp ap aG">##
 </span><span class="bp an aG"> #<span class="abL">       #
<!-- keep newline --></span> #</span><span class="bn ap"><!-- keep newline -->
  </span><span class="bp an aG">        #</span><span class="bp an aG abL"><!-- keep newline -->
 #</span><span class="bn ap"><!-- keep newline -->
   </span><span class="bp an aB"> #</span><span class="bn ap"><!-- keep newline -->
  </span><span class="bp ap aB">  #</span><span class="bn ap"><!-- keep newline -->
   </span><span class="bp an aB"> #</span><span class="bp ap"><!-- keep newline -->
<!-- keep newline --></span><span class="bn ap aB">    #</span><span class="bn an"><!-- keep newline -->
<!-- keep newline --></span><span class="bp an"> </span><span class="bp ap aG">         #</span><span class="bn ap"><!-- keep newline -->
   </span><span class="bp an"><!-- keep newline -->
<!-- keep newline --></span><span class="bn an aB">#
  </span><span class="bp ap">       </span><span class="bp an aG"> <span class="abL">  #
#</span></span><span class="bn ap"><!-- keep newline -->
   </span><span class="bp an aB">          #<span class="bn ap">         </span>
 </span><span class="bp an aG"># </span><span class="bn ap aB"><!-- keep newline -->
    #</span><span class="bp ap">  </span><span class="bn ap aB">        #
   </span><span class="bp an aB"> #<span class="bn ap">         </span>
 #</span><span class="bn ap"><!-- keep newline -->
 </span><span class="bp ap aG abL">  ##</span><span class="bp an aG abL">#   #
  #       #
   ##<span class="abG">  </span> ##
     ###</span><span class="bn ap abL">  </span>
  </div>

 </body>
</html>
